<template>
  <div>
    <el-card class="box-card">
      班级：
      <el-select v-model="planCourceParam.classId" placeholder="请选择班级">
        <el-option
            v-for="item in classes"
            :key="item.classId"
            :label="item.className"
            :value="item.classId">
          <span style="float: left">{{ item.className }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.classType }}</span>
        </el-option>
      </el-select>
      <br/>
      课程：
      <el-select v-model="planCourceParam.courceId" placeholder="请选择课程">
        <el-option
            v-for="item in cources"
            :key="item.courceId"
            :label="item.courceName"
            :value="item.courceId">
          <span style="float: left">{{ item.courceName }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.courceDesc }}</span>
        </el-option>
      </el-select>

      <div class="block">
        <span class="demonstration">课程开始时间：</span>
        <el-date-picker
            v-model="planCourceParam.courceStarttime"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">课程结束时间：</span>
        <el-date-picker
            v-model="planCourceParam.courceEndtime"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="block">
        <el-input v-model="planCourceParam.message" style="width: 180px" placeholder="请输入验证码"></el-input>
        <el-button type="info" :loading="sendFlag" @click="send">{{sendMes}}</el-button>
      </div>

      <el-button type="warning" @click="nullPlan">重置</el-button>

      <el-button type="primary" @click="plan">提交</el-button>

    </el-card>






  </div>
</template>

<script>
export default {
  name: "cource",
  data(){
    return{
      cources:[],
      classes:[],
      planCourceParam:{
        classId:null,
        courceId:null,
        courceStarttime:null,
        courceEndtime:null,
        message:null
      },
      sendFlag:false,
      sendMes:"验证码发送",
      timer:null,
      count:'',
    }
  },
  methods:{
    getClasses(){
      this.$http.get("/woniuClass/classes").then(
          (resp)=>{
            this.classes=resp.data.object;
          }
      )
    },
    sended(){

      var time = 60;
      if (!this.timer){
        this.count = time;
        this.sendFlag = true;
        this.timer = setInterval(()=>{
          if (this.count>0&&this.count<=time){
            this.sendMes = "已发送验证码，"+this.count+"s后可重新发送";
            this.count--;
          }else{
            this.sendFlag=false;
            clearInterval(this.timer);
            this.timer=null;
            this.sendMes = "验证码发送";
          }
        },1000)
      }

    },
    send(){
      this.$http.get("/safe/mes").then(
              resp=>{
                if (resp.data.code==20000){
                  this.$message({
                    message: resp.data.message,
                    type: 'success'
                  });
                }else{
                  this.$message({
                    message: resp.data.message,
                    type: 'error'
                  });
                }

              }
      )
      this.sended();
    },
    getCources(){
      this.$http.get("/woniuCource/cources").then(
          resp=>{
            this.cources = resp.data.object;
          }
      )
    },
    plan(){
      this.sendFlag=false;
      clearInterval(this.timer);
      this.timer=null;
      this.sendMes = "验证码发送";
      this.$http.post("/woniuClassUser/plan",this.planCourceParam).then(
          resp=>{
            if (resp.data.code==20000){
              this.$message({
                message: resp.data.message,
                type: 'success'
              });
              this.nullPlan();
            }
            else{
              this.$message({
                message: resp.data.message,
                type: 'error'
              });
            }
          }
      )
    },
    nullPlan(){
      this.planCourceParam={
        classId:null,
        courceId:null,
        courceStarttime:null,
        courceEndtime:null
      };
    }
  },
  created() {
    this.getClasses();
    this.getCources();
  }
}
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 400px;
}
</style>
